(function boxSelection() {

    // 添加选择交互
    const select = new ol.interaction.Select();
    map.addInteraction(select);

    // 初始化 selectFeature
    const selectFeatures = select.getFeatures();

    // 添加 dragBox 交互
    const dragBox = new ol.interaction.DragBox({
        // Return true if only the platform-modifier-key (the meta-key on Mac, ctrl-key otherwise) is pressed, false otherwise (e.g. when additionally the shift-key is pressed).
        condition: ol.events.condition.platformModifierKeyOnly
    });
    map.addInteraction(dragBox);

    dragBox.on('boxend', () => {
        // 如果视图发生了旋转，那么我们要去对比旋转后的 geometry，如果相符，就添加到 selectFeatures 中

        // 获取视图旋转角度
        const view = map.getView();
        const rotation = view.getRotation();

        // flag
        const rightAngle = Math.PI / 2;
        const oblique = rotation % rightAngle !== 0;

        const condidateFeatures = oblique ? [] : selectFeatures;

        const extent = dragBox.getGeometry().getExtent();

        // 遍历将符合 dragBox.getGeometry().getExtent() 添加到 condidateFeatures 中
        vectorSource.forEachFeatureIntersectingExtent(extent, feature => {
            condidateFeatures.push(feature);
        });

        if (oblique) {

            const anchor = view.getCenter();

            const geometry = dragBox.getGeometry().clone();
            geometry.rotate(-rotation, anchor);
            const extent = geometry.getExtent();

            condidateFeatures.forEach(feature => {
                const geometry = feature.getGeometry().clone();
                geometry.rotate(-rotation, anchor);
                if (geometry.interactsExtent(extent)) {
                    selectFeatures.push(feature);
                }
            })

        }
    });

    dragBox.on('boxstart', () => {
        selectFeatures.clear();
    });

})();


(function iconPixelOperations() {
    const selectStyle = {};
    const select = new ol.interaction.Select({
        style: feature => {
            const image = feature.get('style').getImage().getImage();
            if (!selectStyle[image.src]) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                ctx.width = image.width;
                ctx.height = image.height;
                ctx.drawImage(image, 0, 0, image.width, image.height);
                const imageData = ctx.getImageData(0, 0, image.width, image.height);
                const data = imageData.data;
                for (let i = 0, len = data.length; i < len; i = i + (i % 4 == 2 ? 2 : 1)) {
                    data[i] = 255 - data[i];
                }
                ctx.putImageData(imageData, 0, 0);
                selectStyle[image.src] = createStyle(undefined, canvas);
            }
            return selectStyle[image.src];
        }
    });
    map.addInteraction(select);
    map.on('pointermove', function(evt){
        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)? 'pointer': ''
    });
})();